<template>
  <div class="page" @scroll="scroll">
    <div class="top" v-if="data">
      <div class="cover" :style="{ backgroundImage: `url(${data.coverImgUrl})` }"></div>
      <header>
        <div class="cover" :style="{ backgroundImage: `url(${data.coverImgUrl})` }"></div>
        <i class="iconfont icon-fanhui" @click="$router.back()"></i>
        <span>{{ showTitle ? data.name : '歌单' }}</span>
      </header>
      <!-- 歌单信息 -->
      <div class="info">
        <div class="left">
          <img :src="data.coverImgUrl" alt="" />
          <div class="count">
            <i class="iconfont icon-headset"></i>
            <span>{{ filterNum(data.subscribedCount) }}</span>
          </div>
        </div>
        <div class="right">
          <h2>{{ data.name }}</h2>
          <div class="msg">
            <img :src="data.creator.avatarUrl" alt="" />
            <span>{{ data.creator.nickname }}</span>
          </div>
        </div>
      </div>
      <!-- 收藏评论 -->
      <ul class="sing-menu">
        <li>
          <i class="iconfont icon-pinglun"></i>
          <span>评论</span>
        </li>
        <li>
          <i class="iconfont icon-xihuan1"></i>
          <span>点赞</span>
        </li>
        <li>
          <i class="iconfont icon-tianjia"></i>
          <span>收藏</span>
        </li>
        <li>
          <i class="iconfont icon-youcecaidan"></i>
          <span>更多</span>
        </li>
      </ul>
    </div>
    <music-list v-if="data" :data="data.tracks" :count="data.subscribedCount" />
  </div>
</template>
<script>
import { getCurrentInstance, ref } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name:'songs-detail',
  setup() {
    let { proxy } = getCurrentInstance()
    let route = useRoute()
    let data = ref(null)
    let showTitle = ref(false)
    function scroll() {
      showTitle.value = document.querySelector('.page').scrollTop > 100 ? true : false
    }
    proxy.$showLoading()
    proxy.$api.home.getRecommendDetail({ id: route.params.id }).then((res) => {
      data.value = res.playlist
      proxy.$hideLoading()
    })
    return {
      showTitle,
      data,
      scroll
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  height: 270px;
  position: relative;
  padding: 5px 20px 50px;
  padding-top: 44px;
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1;
    filter: blur(15px);
  }
  header {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    box-sizing: border-box;
    height: 44px;
    z-index: 1;
    padding: 5px 10px 5px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: @font-color-light;
    i {
      font-size: 22px;
      margin-right: 10px;
    }
    span {
      font-size: 16px;
    }
  }
  .info {
    display: flex;
    height: 120px;
    .left {
      position: relative;
      color: #fff;
      img {
        width: 120px;
        height: 120px;
        border-radius: 5px;
      }
      .count {
        display: flex;
        align-items: center;
        position: absolute;
        top: 2px;
        right: 2px;
      }
    }
    .right {
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      h2 {
        font-size: 16px;
        color: #fff;
      }
      .msg {
        display: flex;
        align-items: center;
        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
        span {
          color: @font-color-desc-v2;
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }
  }
  .sing-menu {
    padding: 0 10px 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    color: @font-color-light;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        font-size: 20px;
        margin-bottom: 5px;
      }
    }
  }
}
.bottom {
  background: #fff;
  .play-info {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid @border-color;
    .left {
      margin-left: 5px;
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
      }
      .play-all {
        font-size: 16px;
        margin-left: 10px;
        span {
          font-size: 12px;
          color: @font-color-desc-v2;
          margin-left: 5px;
        }
      }
    }
    .right {
      height: 100%;
      background: @theme-color;
      padding: 0 30px 0 10px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      color: @font-color-light;
      font-size: 14px;
      i {
        font-size: 14px;
        margin-right: 5px;
      }
    }
  }
  .music-list {
    li {
      height: 60px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      span {
        width: 60px;
        text-align: center;
        font-size: 16px;
      }
      .music-info {
        flex: 1;
        height: 60px;
        padding: 5px 0;
        box-sizing: border-box;
        border-bottom: 1px solid @border-color;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .t1,
        .t2 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 320px;
        }
        .t1 {
          font-size: 16px;
        }
        .t2 {
          font-size: 12px;
          span {
            font-size: 12px;
          }
          color: @font-color-desc-v2;
        }
      }
    }
  }
}
</style>
